<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
		
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/card.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

		<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
	
	    <script type="text/javascript" src="./libs/spark-md5-3.0.0.min.js"></script>
	    <script type="text/javascript" src="./libs/crypto-js.js"></script>
	    <script type="text/javascript" src="./libs/base64.min.js"></script>
	    <script type="text/javascript" src="./libs/ufile-token.js"></script>
	    
	    <style>
	    	input.picInput{
	    		display: none;
	    	}
	    	img.picShow{
	    		width:80px;
	    		height:80px;
	    	}
	    	.many{
	    		position:relative;
	    		display: inline-block;
	    		margin-right:20px;
	    		width:80px;
	    		height:80px;
	    	}
	    	.many img{
	    		width:80px;
	    		height:80px;
	    	}
	    	.many span{
	    		position:absolute;
	    		width:15px;
	    		height:15px;
	    		top:0;
	    		right:0;
	    		background: url(img/del.png);
	    		background-size: 15px 15px;
	    	}
	    	.toolong{
	    		display: block;
	    		max-width:200px;
	    	}
	    </style>
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">
			<div class="content-wrapper">
				<section class="content-header">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>游戏用户</a>
						</li>
						<li class="active">游戏管理</li>
					</ol>
				</section>
				<section class="content">
					<div class="box">
						<div class="box-header with-border">
							游戏列表
						</div>
						<div class="box-body">
							<div class="buyu_search_group">
								<div class="row">
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">游戏名称</button>
											</div>
											<input type="text" class="form-control" id="name">
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">游戏类型</button>
											</div>
											<select type="text" class="form-control gameType" id="type_id"></select>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">时间范围</button>
											</div>
											<!-- /btn-group -->
											<input type="text" class="form-control" id="select_time">
											<div class="input-group-addon clearBtns" onclick="clearRangeTime(this)">x</div>
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<button type="button" class="btn bg-primary margin" onclick="search()"><i class="fa fa-search" ></i>&nbsp;搜索</button>
										<button type="button" class="btn bg-primary margin" onclick="reset()"><i class="fa fa-trash" ></i>&nbsp;重置</button>
									</div>
									<div class="col-xs-12">

										<div class="fixed-table-toolbar margin">
											<div class="bs-bars pull-left">
												<div class="hidden-xs" id="managerTableToolbar" role="group">
													<button type="button" class="btn btn-primary " onclick="addGame()" id=""><i class="fa fa-plus"></i>&nbsp;新增</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<!-- /.box-header -->
								<div class="box-body">
									<table id="example" class="display nowrap table table-bordered table-striped" style="width:100%;">
										<thead>
											<tr>
												<th>ID</th>
												<th>名称</th>
												<th>logo</th>
												<th>类型</th>
												<th>简介</th>
												<th>游戏币单位</th>
												<th>是否热门</th>
												<th>是否新上</th>
												<th>充值比例</th>
												<th>下载地址</th>
												<th>添加时间</th>
												<th>操作</th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					
				</section>
			</div>
		</div>
		<div class="modal fade parents in" id="addGameModal" >
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header"> 
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
						<h4 class="modal-title">添加游戏</h4> </div>
					<div class="modal-body">
						<div class="row">
							<label class="margin-bottom-none col-xs-12">游戏名称<input type="text" class="form-control" name="add_name"></label>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏logo</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control onePic picInput" name="add_logo"/>
									<img src="img/add.png" class="picShow" alt="" />
								</label>
							</div>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏主图</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control onePic picInput" name="add_main_pic"/>
									<img src="img/add.png" class="picShow" alt="" />
								</label>
							</div>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏图片</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control manyPic picInput" name="add_imgs"/>
									<img src="img/add.png" class="picShow" alt="" />
								</label>
							</div>
							<label class="margin-bottom-none col-xs-12">游戏类型<select type="text" class="form-control gameType" name="add_type_id"></select></label>
							<label class="margin-bottom-none col-xs-12">游戏简介<input type="text" class="form-control" name="add_main_intro" maxlength="20"></label>
							<label class="margin-bottom-none col-xs-12">游戏介绍<textarea type="text" class="form-control" name="add_details_intro"rows="4"></textarea></label>
							<label class="margin-bottom-none col-xs-12">游戏币单位<select type="text" class="form-control coinType" name="add_unit_id"></select></label>
							<label class="margin-bottom-none col-xs-12">充值比例(usdt)
								<div class="input-group">
									<div class="input-group-btn">
										<button type="button" class="btn btn-default" aria-expanded="false">1  :</button>
									</div>
									<input type="text" class="form-control" name="add_unit_rate">
								</div>
							</label>
							<div class="col-xs-12" style="line-height: 2;">是否热门
								<div class="col-xs-12" style="padding: 0;">
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="add_is_hot" value="1" style="margin:0 5px 0 0;"/> 是
									</label>
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="add_is_hot" value="0" style="margin:0 5px 0 0;"/> 否
									</label>
								</div>
							</div>
							<div class="col-xs-12" style="line-height: 2;">是否新上
								<div class="col-xs-12" style="padding: 0;">
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="add_is_new" value="1" style="margin:0 5px 0 0;"/> 是
									</label>
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="add_is_new" value="0" style="margin:0 5px 0 0;"/> 否
									</label>
								</div>
							</div>
							<label class="margin-bottom-none col-xs-12">安卓下载地址<input type="text" class="form-control" name="add_android_download_url"></label>
							<label class="margin-bottom-none col-xs-12">IOS下载地址<input type="text" class="form-control" name="add_ios_download_url"></label>
						</div>
					</div>
					<div class="modal-footer"><button type="button" class="btn btn-primary save" onclick="addSave()">确定</button></div>
				</div>
			</div>
		</div>
		
		<div class="modal fade parents in" id="editGameModal" >
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header"> 
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
						<h4 class="modal-title">游戏编辑</h4> </div>
					<div class="modal-body">
						<div class="row">
							<input type="hidden" name="edit_id"/>
							<label class="margin-bottom-none col-xs-12">游戏名称<input type="text" class="form-control" name="edit_name"></label>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏logo</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control onePic picInput" name="edit_logo"/>
									<img src="img/add.png" class="picShow" alt="" name="edit_logo"/>
								</label>
							</div>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏主图</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control onePic picInput" name="edit_main_pic"/>
									<img src="img/add.png" class="picShow" alt="" name="edit_main_pic"/>
								</label>
							</div>
							<div class="margin-bottom-none col-xs-12">
								<div>游戏图片</div>
								<label style="display: inline-block;">
									<input type="file" class="form-control manyPic picInput" name="edit_imgs"/>
									<img src="img/add.png" class="picShow" alt="" />
								</label>
							</div>
							<label class="margin-bottom-none col-xs-12">游戏类型<select type="text" class="form-control gameType" name="edit_type_id"></select></label>
							<label class="margin-bottom-none col-xs-12">游戏简介<input type="text" class="form-control" name="edit_main_intro" maxlength="20"></label>
							<label class="margin-bottom-none col-xs-12">游戏介绍<textarea type="text" class="form-control" name="edit_details_intro" rows='4'></textarea></label>
							<label class="margin-bottom-none col-xs-12">游戏币单位<select type="text" class="form-control coinType" name="edit_unit_id"></select></label>
							<label class="margin-bottom-none col-xs-12">充值比例
								<div class="input-group">
									<div class="input-group-btn">
										<button type="button" class="btn btn-default" aria-expanded="false">1  :</button>
									</div>
									<input type="text" class="form-control" name="edit_unit_rate">
								</div>
							</label>
							<div class="col-xs-12" style="line-height: 2;">是否热门
								<div class="col-xs-12" style="padding: 0;">
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="edit_is_hot" value="1" style="margin:0 5px 0 0;"/> 是
									</label>
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="edit_is_hot" value="0" style="margin:0 5px 0 0;"/> 否
									</label>
								</div>
							</div>
							<div class="col-xs-12" style="line-height: 2;">是否新上
								<div class="col-xs-12" style="padding: 0;">
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="edit_is_new" value="1" style="margin:0 5px 0 0;"/> 是
									</label>
									<label class="margin-r-5" style="font-weight: normal;">
										<input type="radio" name="edit_is_new" value="0" style="margin:0 5px 0 0;"/> 否
									</label>
								</div>
							</div>
							<label class="margin-bottom-none col-xs-12">安卓下载地址<input type="text" class="form-control" name="edit_android_download_url"></label>
							<label class="margin-bottom-none col-xs-12">IOS下载地址<input type="text" class="form-control" name="edit_ios_download_url"></label>
							<label class="margin-bottom-none col-xs-12">充值规则<textarea type="text" class="form-control" name="edit_recharge_rule"></textarea></label>
						</div>
					</div>
					<div class="modal-footer"><button type="button" class="btn btn-primary save" onclick="editSave()">确定</button></div>
				</div>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
		<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

		<script src="dist/js/adminlte.min.js"></script>
		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<script type="text/javascript">
			var ufile =  new UCloudUFile(bucketName, bucketUrl, tokenPublicKey, tokenPrivateKey, tokenServerUrl, prefix);
			$.ajax({
				"type": 'post',
				"url": url + 'Back_GameTypeList',
				'contentType': "application/x-www-form-urlencoded",
				"headers": {
					"auth-token": localStorage.getItem("wallet_token")
				},
				data:{
					data:JSON.stringify({page_num:1})
				},
				success:function(res){
					if(res.status!=1){
						alert(res.error)
						return false;
					}
					$.each(res.data.data_list,function(index,item){
						if(index == 0){
							$(".gameType").append('<option value = "">全部</option>')
						}
						$(".gameType").append('<option value = "'+item.id+'">'+item.name+'</option>')
					})
				}
			})
			
			$.ajax({
				"type": 'post',
				"url": url + 'Back_GameUnitList',
				'contentType': "application/x-www-form-urlencoded",
				"headers": {
					"auth-token": localStorage.getItem("wallet_token")
				},
				data:{
					data:JSON.stringify({page_num:1})
				},
				success:function(res){
					if(res.status!=1){
						alert(res.error)
						return false;
					}
					$.each(res.data.data_list,function(index,item){
						$(".coinType").append('<option value = "'+item.id+'">'+item.name+'</option>')
					})
				}
			})
			$('#select_time').daterangepicker({
				timePicker: true,
				timePicker24Hour: true,
				autoUpdateInput: false,
				locale: {
					format: "YYYY-MM-DD HH:mm"
				}
			})
			
			var table;
			var time = setInterval(function(){
				if($('#type_id').html()!=""){
					table = $('#example').DataTable({
						'ordering': false,
						'lengthChange': false,
						'searching': false,
						'info': true,
						"processing": true,
						"serverSide": true,
						'scrollX':true,
						"ajax": {
							"type": 'post',
							"url": url + "Back_GameList",
							'contentType': "application/x-www-form-urlencoded",
							"headers": {
								"auth-token": localStorage.getItem("wallet_token")
							},
							"data": function(d) {
								var dataType ={
									name:{type:'string',value:$("#name").val()},
									type_id:{type:'string',value:$("#type_id").val()},
									start_time:{type:'time',value:$("#select_time").val().substring(0, 16)},
									end_time:{type:'time',value:$("#select_time").val().substring(19, 35)}
								}
								var Json = renderData(dataType);
								Json.page_num = d.start / 10 + 1;
								var data={};
								data.data = JSON.stringify(Json);
								return data;
							},
							"dataFilter": function(data) {
								var datajson = eval('(' + data + ')');
								if(datajson.status == 1000||datajson.status == 102) {
									ToLogin(datajson)
									return false;
								} else if(datajson.status != 1) {
									alert(datajson.error);
									return false;
								}
								var json = {};
								if(datajson.data==null){
									json.recordsTotal = 0;
									json.recordsFiltered = 0;
									json.data = [];
									return JSON.stringify(json);
								}else{
									json.recordsTotal = datajson.data.total;
									json.recordsFiltered = datajson.data.total;
									json.data = datajson.data.data_list;
									return JSON.stringify(json);
								}
							}
						},
						"columns": [{
								data: 'id'
							},
							{
								data: 'name'
							},
							{
								data:null,render:function(data){
									return '<img class="tablePic" src = "'+hasHttp(data.logo)+'">';
								}
							},
		
							{
								data: null,
								render: function(data) {
									return $("#type_id option[value="+data.type_id+"]").text();
								}
							},
							{
								data: null,render:function(data){
									return "<div style='min-width:200px;max-width:300px;word-wrap:break-all;white-space:normal;'>"+data.main_intro+"</div>"
								},
							},
							{
								data: 'unit_name'
							},
							
							{
								data: null,render:function(data){
									var is_hot_list ={0:'否',1:'是'}
									return is_hot_list[data.is_hot];
								}
							},
							{
								data: null,render:function(data){
									var is_new_list ={0:'否',1:'是'}
									return is_new_list[data.is_new];
								}
							},
							{
								data: 'unit_rate'
							},
							{
								data: null,render:function(data){
									return '<div class="toolong" title="'+data.android_download_url+'">android : '+data.android_download_url+'</div><div class="toolong" title="'+data.ios_download_url+'">IOS : '+data.ios_download_url+'<div>';
								}
							},
							{
								data: 'add_time'
							},
							{
								data: null,
								render: function(data) {
									return "<input type='hidden' value='" + JSON.stringify(data) + "'><button type='button' class='btn btn-primary button-margin' onclick='editGame(this)' ><i class='fa fa-pencil'></i>&nbsp;修改</button><button type='button' class='btn btn-danger button-margin' onclick='delGame(this)'><i class='fa fa-trash-o'></i>&nbsp;删除</button>"
								}
							}
						]
					})
					clearInterval(time)
				}
				
			},500)
			
			
		</script>
		<script type="text/javascript">
			//addGameModal
			
			function addSave() {
				var arr=[];
				$.each($("#addGameModal .many img"),function(index,item){
					var urlArr = $(item).attr("src").split("/");
					arr.push(urlArr[urlArr.length-1]);
				})
				var data ={
					imgs:arr.join(","),
					name:$("#addGameModal [name=add_name]").val(),
					logo:strSplitUrl($("#addGameModal [name=add_logo]").siblings("img").attr("src")),//图片
					type_id:$("#addGameModal [name=add_type_id]").val(),
					main_pic:strSplitUrl($("#addGameModal [name=add_main_pic]").siblings("img").attr("src")),
					main_intro:$("#addGameModal [name=add_main_intro]").val(),
					details_intro:$("#addGameModal [name=add_details_intro]").val(),
					unit_id:$("#addGameModal [name=add_unit_id]").val(),
					unit_rate:$("#addGameModal [name=add_unit_rate]").val(),
					is_hot:$("#addGameModal [name=add_is_hot]:checked").val(),
					is_new:$("#addGameModal [name=add_is_new]:checked").val(),
					android_download_url:$("#addGameModal [name=add_android_download_url]").val(),
					ios_download_url:$("#addGameModal [name=add_ios_download_url]").val(),
				}
				
				$.ajax({
					'type': 'post',
					'url': url + "Back_GameAdd",
					'headers': {
						'auth-token': localStorage.getItem("wallet_token")
					},
					'contentType': "application/x-www-form-urlencoded",
					'data': {
						data:JSON.stringify(data)
					},
					'success': function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						$("#addGameModal").modal("hide");
						move("success", res.error);
						table.draw(false);
					}
				})
			}

			function addGame() {
				$("#addGameModal").modal('show');
				$("#addGameModal").find('input[type=text]').val("");
			}
			
			function editGame(_this){
				$("#editGameModal .many").remove();
				var data = JSON.parse($(_this).siblings('input').val())
				$("#editGameModal").modal('show');
				$.each(data,function(index,item){
					if(index == "is_hot"||index == "is_new" ){
						$("#editGameModal [name=edit_"+index+"][value="+item+"]").prop("checked",true);
					}else if(index == "main_pic"||index == "logo" ){
						$("#editGameModal [name=edit_"+index+"]").attr("src",hasHttp(item));
					}else if(index == "imgs"){
						$.each(item.split(','),function(key,items){
							var str = '<div class="many"><img src="'+ hasHttp(items) +'" class="picShow" alt="" /><span class="delSpan"></span></div>'
							$("#editGameModal [name=edit_imgs]").parents("label").before(str);
						})
						
					}else{
						$("#editGameModal [name=edit_"+index+"]").val(item);
					}
				})
//				$("#addGameModal").find('input[type=text]').val("");
			}
			
			function editSave() {
				var arr=[];
				$.each($("#editGameModal .many img"),function(index,item){
					arr.push(strSplitUrl($(item).attr("src")))
				})
				var data ={
					id:$("#editGameModal [name=edit_id]").val(),
					imgs:arr.join(","),
					name:$("#editGameModal [name=edit_name]").val(),
					logo:strSplitUrl($("#editGameModal img[name=edit_logo]").attr("src")),//图片
					type_id:$("#addGameModal [name=edit_type_id]").val(),
					main_pic:strSplitUrl($("#editGameModal img[name=edit_main_pic]").attr("src")),
					main_intro:$("#editGameModal [name=edit_main_intro]").val(),
					details_intro:$("#editGameModal [name=edit_details_intro]").val(),
					unit_id:$("#editGameModal [name=edit_unit_id]").val(),
					unit_rate:$("#editGameModal [name=edit_unit_rate]").val(),
					is_hot:$("#editGameModal [name=edit_is_hot]:checked").val(),
					is_new:$("#editGameModal [name=edit_is_new]:checked").val(),
					android_download_url:$("#editGameModal [name=edit_android_download_url]").val(),
					ios_download_url:$("#editGameModal [name=edit_ios_download_url]").val(),
					recharge_rule:$("#editGameModal [name=edit_recharge_rule]").val(),
					status:1,
				}
				$.ajax({
					'type': 'post',
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					'contentType': "application/x-www-form-urlencoded",
					url: url + "Back_GameUpdate",
					data: {
						data:JSON.stringify(data)
					},
					dataType: "json",
					success: function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						$("#editGameModal").modal("hide");
						move("success", res.error);
						table.draw(false);
					}
				})
			}
			
			function delSave() {
				$.ajax({
					'type': 'post',
					"headers": {
						"auth-token": localStorage.getItem("wallet_token")
					},
					'contentType': "application/x-www-form-urlencoded",
					url: url + "Back_GameUpdate",
					data:{
						data:JSON.stringify({ //昵称
							status: -1,
							id:$("#delGameModal [name=id]").val()
						})
					},
					dataType: "json",
					success: function(res) {
						if(res.status == 1000||res.status == 102) {
							ToLogin(res)
							return false;
						} else if(res.status != 1) {
							alert(res.error);
							return false;
						}
						$("#delGameModal").modal("hide");
						move("success", res.error);
						table.draw(false);
					}
				})
			}

			function delGame(_this) {
				var data = JSON.parse($(_this).siblings('input').val())
				var deleteJson = {
					name: "delGame",
					title: "删除游戏",
					arg: {
						id: data.id,
						name: data.name
					}
				};
				deleteModal(deleteJson, 'delSave');
			}
			
			$(".onePic").change(function(){
				var date = new Date()
	            var fileRename = date.valueOf()+Math.ceil(Math.random()*100);;
	            var file = $(this)[0].files[0];
	            var that = $(this)
	            var data = {
	                file: file,
	                fileRename: fileRename
	            };
				var errorCallBack = function(res) {
	                 console.log(res)
	            };
	            var successCallBack = function(res) {
	                console.log(res)
	                console.log(that)
	                that.siblings('img').attr("src",bucketUrl+fileRename)
	            };
	            var progressCallBack = function(res) {};
	
	            ufile.uploadFile(data, successCallBack, errorCallBack, progressCallBack);
			})
			
			$(".manyPic").change(function(){
				var date = new Date()
	            var fileRename = date.valueOf()+Math.ceil(Math.random()*100);
	            var file = $(this)[0].files[0];
	            var that = $(this)
	            var data = {
	                file: file,
	                fileRename: fileRename
	            };
				var errorCallBack = function(res) {
	                 console.log(res)
	            };
	            var successCallBack = function(res) {
	                console.log(res)
	                console.log(that)
	                that.parents("label").before('<div class="many"><img src="'+bucketUrl+fileRename+'" class="picShow" alt="" /><span class="delSpan"></span></div>')//.siblings('img')//attr("src",bucketUrl+fileRename)
	            };
	            var progressCallBack = function(res) {};
	
	            ufile.uploadFile(data, successCallBack, errorCallBack, progressCallBack);
			})
			
			$("body").on("click",".delSpan",function(){
				$(this).parents(".many").remove();
			})
		</script>
	</body>

</html>